<template>
	<view class="box">
		<view class="banner">
		  <image src="../../static/zixun8.png" mode="widthFix"></image>
		</view>
    
    <view class="swiper">
       <view class="formContent">
         <view class="row">
           <text>人员类别：</text>
             	<picker @change="bindPickerChange" :range="array" class="input"  placeholder="请输入类别">
                <!-- //@change用于获取下拉框改变的值，:range用于循环遍历array数组将数组内容循环 -->
             		<label class="">{{array[index]}}</label>		<!-- //循环array数组index为索引 -->
					<text class="iconfont iconxia1">  </text>
             	</picker>
				
         </view>
        
        
        
            <view class="row">
              <text>姓名：</text>
              <input class="input" type="text" v-model="yfxx.name" placeholder="请输入姓名" />
            </view>
            <view class="row">
            	<text>出生日期：</text>
            	<picker class="input" mode="date" :start="incYears(-60)" :end="incYears(-1)" v-model="yfxx.birthday" @change="datePickerChange($event, 'yfxx.birthday')">
            		<view style="display: flex;">
            			<input placeholder="请输入出生日期" v-model="yfxx.birthday" :disabled="true" style="flex: 1;" />
            			<view class="arrowdown iconfont icon-arrowdown"></view>
            		</view>
            	</picker>
            </view>
             <view class="row">
                           	<text>手机号：</text>
                           	<input class="input" type="number" v-model="yfxx.phone" maxlength="11" placeholder="请输入手机号" />
            </view>
           <view class="row">
             <text>园所名称：</text>
               	<picker @change="bindPickerChange2" :range="array2" class="input">
                  <!-- //@change用于获取下拉框改变的值，:range用于循环遍历array数组将数组内容循环 -->
               		<label class="">{{array2[index2]}}</label>		<!-- //循环array数组index为索引 -->
               	</picker>
           </view>
            <view class="row">
            	<text>培训证编号：</text>
            	<input class="input" type="string" v-model="yfxx.mofen" maxlength="50" placeholder="请输入培训证编号" />
            </view>
            <view class="row">
              <text>职位：</text>
                	<picker @change="bindPickerChange3" :range="array3" class="input">
                   <!-- //@change用于获取下拉框改变的值，:range用于循环遍历array数组将数组内容循环 -->
                		<label class="">{{array3[index3]}}</label>		<!-- //循环array数组index为索引 -->
                	</picker>
            </view>
            <view class="row">
            	<text>上岗/新上岗：</text>
            <!-- 	<input class="input" type="string" v-model="yfxx.shangang" maxlength="10" placeholder="请输入上岗/新上岗" /> -->
             <radio-group @change="radioChange">
             					
             						<label class="label2">
             							<radio value="1" /><text>上岗</text>
             						</label>
             						<label class="label2">
             							<radio value="2" /><text>新上岗</text>
             						</label>
             					</radio-group>
            </view>
             <button class="add-btn" @click="confirm">点击提交</button>
             
            </view>
            </view>
           
	</view>
</template>

<script>
  import common from "@/common/common2.js";
  import idcardCheck from "@/common/idcard.js"
  import xflSelect from '../../components/xfl-select/xfl-select.vue';     //导入
	export default {
		data() {
			return {
				yfxx: {
				  name: "",
				classifier: "", // 类别
         birthday: "",
         phone: "", // 手机号
         mofen: "", //培训证编号
         yuansuo: "", // 园所名称
         zhiwu: "", // 职务
				  },
				 
          
   array: ['保健员', '保育员', '炊事员'],
   array2: ['请选择您的园所', '李沧第一保健院', '第二妇幼保健院', '第三妇幼保健院'],
   array3: ['请选择您的职位', '园长', '领导', '员工'],
   index: 0,index2: 0, index3: 0,
			};
		},
     components: { xflSelect },  //注册为子组件
methods: {
  //下拉框
  bindPickerChange: function(e) {		//改变的事件名
  	//console.log('picker发送选择改变，携带值为', e.target.value)   用于输出改变索引值
  	this.index = e.target.value			//将数组改变索引赋给定义的index变量
  	this.jg=this.array[this.index]		//将array【改变索引】的值赋给定义的jg变量
  //	console.log("籍贯为：",this.jg)		//输出获取的籍贯值，例如：中国
  },
  bindPickerChange2: function(e) {		//改变的事件名
  	//console.log('picker发送选择改变，携带值为', e.target.value)   用于输出改变索引值
  	this.index2 = e.target.value			//将数组改变索引赋给定义的index变量
  	this.jg=this.array2[this.index2]		//将array【改变索引】的值赋给定义的jg变量
  //	console.log("籍贯为：",this.jg)		//输出获取的籍贯值，例如：中国
  },
  bindPickerChange3: function(e) {		//改变的事件名
  	//console.log('picker发送选择改变，携带值为', e.target.value)   用于输出改变索引值
  	this.index3 = e.target.value			//将数组改变索引赋给定义的index变量
  	this.jg=this.array3[this.index3]		//将array【改变索引】的值赋给定义的jg变量
  //	console.log("籍贯为：",this.jg)		//输出获取的籍贯值，例如：中国
  },
  datePickerChange: function(e, id) {
  	if (id === "yfxx.birthday") {
  		this.yfxx.birthday = e.target.value
  		
  	}
},
 datePickerChange: function(e, id) {
      	if (id === "yfxx.birthday") {
      		this.yfxx.birthday = e.target.value
      		
      	}
      	else if (id === "szjl.mociyuejing") {
      		this.szjl.mociyuejing = e.target.value;
      		// console.log(this.szjl.mociyuejing)
      		if (this.szjl.mociyuejing !== "" && this.szjl.mociyuejing !== "不确定") {
      			let date = common.incDays(280, this.szjl.mociyuejing);
      			this.szjl.yuchanqi = common.formatDate(date, "YY-MM-DD")
      		}
      	}
      	else if (id === "szjl.yuchanqi") {
      		this.szjl.yuchanqi = e.target.value
      	}
      },
 incYears(nYear) {
      	let date = common.incYears(nYear);
      	return common.formatDate(date, "YY-MM-DD")
      },
      incDays(nDays) {
      	let date = common.incDays(nDays);
      	return common.formatDate(date, "YY-MM-DD")
      },
      confirm() {
       let data = this.yfxx;
       console.log(JSON.stringify(data))
       // uni.$showMsg('您的个人信息已提交')
       uni.switchTab({
         url:'../home/home'
       })
      },
      radioChange(e){
      				console.log('type:' + e.detail.value);
      				this.sex = e.detail.value;
      			},
	},
  }
</script>

<style lang="less">
.box {
   display: flex;
  flex-direction: column;
 }
 .banner {
   display: flex;
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  margin-bottom: 30%;
 }
 .banner image {
   width: 100%;
   height: 50%;
   padding-top: 10rpx;
 }
 .swiper {
   flex: 1;
   min-height: 300rpx;
   height: calc(100% - 10rpx);
   margin: 0;
   padding-top: 5rpx;
 }
  .formContent {
     width: calc(100% - 45rpx);
     height: 100%;
     margin-left: 20rpx;
     overflow-y: auto;
   }
   .row {
     display: flex;
     flex-direction: row;
     align-items: center;
     min-height: 55rpx;
     line-height: 55rpx;
     color: #333333;
     margin: 10rpx 15rpx;
     font-size: 32rpx;
   }
   
   .row text {
     min-width: 160rpx;
     width: 160rpx;
   }
   
   .row .input {
     background-color: #f9f9f9;
     flex: 1;
     border-radius: 10rpx;
     padding: 15rpx 10rpx;
     overflow: hidden;
   }
   .input2 {
     width: 80%;
     margin: auto;
     margin-bottom: 10px;
     color: #616148;
   }
   .add-btn {
           display: flex;
           align-items: center;
           justify-content: center;
           width: 690upx;
           height: 80upx;
           margin: 60upx auto;
           background-color: rgb(28, 42, 134);
           color: #fff;
    
           border-radius: 10upx;
           box-shadow: 1px 2px 5px rgba(28, 42, 134, 0.4);
       }
   .label2 {
     margin-left: 50rpx;
     margin-right: 10rpx;
   }
</style>
